<template>
  <el-form label-width="6vw">
    <el-form-item label="盒类型">
      <el-select v-model="config.boxType">
        <el-option label="飞机盒" :value="1"></el-option>
        <el-option label="披萨盒" :value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      :label="t('editFormula.partNo')"
      :placeholder="t('editFormula.partNo')"
    >
      <el-select
        v-model="config.boxCode"
        :placeholder="$t('editFormula.partNo')"
        filterable
        @change="partNoChange"
      >
        <el-option
          v-for="item of material.innerBox"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item
      :label="t('editFormula.describe')"
      :placeholder="t('editFormula.describe')"
    >
      <el-input v-model="config.boxDescription"></el-input>
    </el-form-item> -->
    <el-form-item :label="t('editFormula.long')">
      <el-input-number v-model="config.boxLength"></el-input-number>
    </el-form-item>
    <el-form-item :label="t('editFormula.width')">
      <el-input-number v-model="config.boxWidth"></el-input-number>
    </el-form-item>
    <el-form-item :label="t('editFormula.height')">
      <el-input-number v-model="config.boxHeigh"></el-input-number>
    </el-form-item>

    <el-form-item label="封胶料号">
      <el-input
        v-model="config.sealingMaterialCode"
        placeholder="封胶料号"
      ></el-input>
    </el-form-item>
    <el-form-item label="封胶规格">
      <el-input v-model="config.sealingSpec" placeholder="封胶规格"></el-input>
    </el-form-item>
    <el-form-item label="封胶方式">
      <el-input v-model="config.sealingMode" placeholder="封胶方式"></el-input>
    </el-form-item>
    <el-form-item label="每盒盘数">
      <el-input-number
        v-model="config.bagsPerBox"
        placeholder="每盒盘数"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="每箱盒数">
      <el-input-number
        v-model="config.binsPerBox"
        placeholder="每箱盒数"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="是否有气泡袋">
      <el-switch
        v-model="config.bubbleBagStamp"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <template v-if="config.bubbleBagStamp">
      <el-form-item label="气泡袋料号">
        <el-input
          v-model="config.bubbleBagMaterialCode"
          placeholder="气泡袋料号"
        ></el-input>
      </el-form-item>
      <el-form-item label="气泡袋类型">
        <el-input
          v-model="config.bubbleBagModel"
          placeholder="气泡袋类型"
        ></el-input>
      </el-form-item>
    </template>
    <el-form-item label="是否有骑缝章">
      <el-switch
        v-model="config.hasRidingStamps"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <template v-if="config.hasRidingStamps">
      <el-form-item label="骑缝章料号">
        <el-input
          v-model="config.ridingStampsMaterialCode"
          placeholder="骑缝章料号"
        ></el-input>
      </el-form-item>
      <el-form-item label="骑缝章类型">
        <el-input
          v-model="config.ridingStampsType"
          placeholder="骑缝章类型"
        ></el-input>
      </el-form-item>
      <el-form-item label="骑缝章位置">
        <el-select
          v-model="config.ridingStampingPosition"
          placeholder="骑缝章位置"
        >
          <el-option
            v-for="item of postion"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </template>
    <el-form-item label="喷隐形码">
      <el-switch
        v-model="config.hasBoxSprayCodes"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <template v-if="config.hasBoxSprayCodes">
      <el-form-item label="隐形码位置">
        <el-select v-model="config.sprayCodesSide">
          <el-option
            v-for="item of postion"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </template>
  </el-form>
</template>
<script setup>
import editStore from "@/store/editStore";
import { computed } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const store = editStore();
const config = computed(() => store.innerBox);

let postion = [
  { label: "前面", value: "3" },
  { label: "后面", value: "5" },
  { label: "左面", value: "7" },
  { label: "右面", value: "6" },
  { label: "顶面", value: "2" },
  { label: "底面", value: "4" },
];

let material = computed(() => {
  let list = store.materialList;
  return {
    innerBox: list.innerBox,
  };
});

function partNoChange(e) {
  let innerBoxs = material.value.innerBox;
  let innerBox = innerBoxs.find((item) => item.materialCode == e);
  if (innerBox) {
    config.value.boxDescription = innerBox.description;
    config.value.boxLength = innerBox.length;
    config.value.boxWidth = innerBox.width;
    config.value.boxHeigh = innerBox.boxHeigh;
  }
}
</script>
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
.el-input-number {
  width: 100%;
}
</style>
